<ion-content isScrolling='false'>
    <vg-player (onPlayerReady)="onPlayerReady($event)">
        <vg-buffering></vg-buffering>
        <video #media [vgMedia]="media" [src]="currentItem.src" id="singleVideo" preload="auto" poster="http://120.76.244.22:3000/android/1.5.9/poster.jpg">
            </video>
    </vg-player>

    <div class='back-drop' (click)='hideOrShowTool()'></div>

    <div class="back" [ngClass]='{"hide-all":!showTool}'>
        <span (click)="closeModal();$event.stopPropagation();">
                <img src="assets/imgs/return.svg" alt="">
            </span>
        <label>{{ config.title }}</label>
    </div>

    <!-- <div class='left-bg'></div> -->
    <div class="left" [ngClass]='{"hide-all":!showTool}'>
        <ion-scroll scrollY="true">
            <div class="square" [ngClass]="{paramsSelected: cameraPich}" (click)="selectCamera()">
                <div>
                    <label class="title">通讯状态：</label>
                </div>
                <div class="dataFlex">
                    <div [ngStyle]="{ color: isOnline ? '#0FEE2F' : '#d3d3d3' }">
                        <span> {{ isOnline ? '在线': '离线'}} </span>
                    </div>
                </div>
            </div>
            <div class="square" *ngFor="let left of config.message; let i = index" [ngClass]="{paramsSelected:paramsPitch==i && !cameraPich}" (click)='selectParams(i)'>
                <!-- <div class='square-bg'></div> -->
                <div>
                    <label class="title">{{ left.deviceName }}</label>
                    <span class="unit" *ngFor='let detail of left.deviceParameters; first as isFirs'>
                            <label *ngIf="!isFirs">/</label>
                            <label>{{ detail.unit }}</label>
                        </span>
                </div>
                <div class="dataFlex">
                    <div *ngFor="let detail of left.deviceParameters; first as isFirs">
                        <span class="separator" *ngIf="!isFirs">/</span>
                        <span [ngClass]='{fontSize13: detail.valueName=="无"}'>
                                {{ left.onlineStatus==2?'-' : detail.valueName || detail.value }}
                            </span>
                    </div>
                </div>
            </div>

            <div style='margin-top: 36px;'>
                <div class='device-state' *ngFor='let type of deviceType; let k = index'>
                    <div class='device-img' *ngIf='k < 2'>
                        <img src="{{'assets/imgs/device/'+type.deviceTypeCode+'.png'}}" imgState="assets/imgs/device/default.png">
                    </div>
                    <div class='each-state' *ngIf='k < 2'>
                        <div *ngFor='let state of [1,2,3]; let i = index'>
                            <p class='value greenColor' *ngIf='i===0'>{{type.runCount}}</p>
                            <p class='value' *ngIf='i===1'>{{type.stopCount}}</p>
                            <p class='value redColor' *ngIf='i===2'>{{type.breakDownCount}}</p>
                            <p class='unit' *ngIf='i===0'>运行</p>
                            <p class='unit' *ngIf='i===1'>停止</p>
                            <p class='unit' *ngIf='i===2'>故障</p>
                        </div>
                    </div>
                </div>
            </div>
        </ion-scroll>
    </div>

    <div echarts [options]="options" class="middle" [ngClass]='{"hide-all":!showTool}'></div>


    <aside class="menu-side" [ngClass]='{"hide-all":!showTool}'>
        <p style="padding-top: 5px;">
            <!-- <ion-icon name="ios-refresh-outline" (click)="refreshVideo()"></ion-icon> -->
            <img class="refresh" src='assets/imgs/gallery/SVG/20022.svg' (click)="refreshVideo()">
        </p>
        <p style="margin-bottom: 15px;">
            <ion-icon name="ios-camera-outline" (click)="toPhoto()"></ion-icon>
        </p>
        <ion-scroll class="video-list" #videoView scrollY="true">
            <div class="video-item" *ngFor="let vid of config.videoList; let i = index" [ngClass]="{sand:pitch==i}">
                <p class="video-link" (click)="choose(i)">
                    <img src="http://120.76.244.22:3000/android/1.5.9/thumbnail.png" style="width: 100%" />
                </p>
                <label style="font-size: 9px;">{{vid.cameraName}}</label>
            </div>
        </ion-scroll>
        <p style="margin-bottom: 10px;height: 35px">
            <!-- <i class="icon ion-ios-arrow-down" *ngIf="moreVideo && moreVideo.tip" style="font-size: 25px" (click)="scrollVideo()"></i> -->
            <!-- <ion-icon name="ios-arrow-down-outline" style="font-size: 25px" (click)="scrollVideo()"></ion-icon> -->
            <img src='assets/imgs/gallery/down.svg' (click)="scrollVideo()" *ngIf='config.videoList && config.videoList.length > 2'>
        </p>
    </aside>


</ion-content>